<template>
  <div class="ans" v-if="dataReady">
    <div class="head">
      <div class="head-l">
        <user-head :show="showHead" :mode="headMode" :result="userResult" :user="myScore" :ansList="myAnsList" ></user-head>
      </div>
      <div class="time" v-if="showTime">
        <tiem-count :initBtn="initTimeCount" 
                    :startBtn="startTimeCount" 
                    :initTime="initTime" 
                    :stopBtn="stopTimeCount" 
                    @timeout="timeoutHandle">
        </tiem-count>
      </div>
      <div class="head-r">
        <user-head :show="showHead" :reverse="true" :mode="headMode" :result="withUserResult" :user="otherScore" :ansList="otherAnsList"></user-head>
      </div>
      <!-- 答题前动画 -题目类型入场 -->
      <div class="head-tag">
        <ant-title-item :quesIndex="quesIndex" 
                            :quesMode="subjectList[quesIndex].parentType" 
                            :fadeIn="showTitleType"
                            @antEnd="antTitleHandle">
        </ant-title-item>
      </div>
   
    </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
      <!-- 答题区域 -->
      <answer-question :subjectList="subjectList"  
                       :quesIndex="quesIndex" 
                       :fadeIn="showTitle" 
                       :canNext="canNext"
                       :otherScore="otherScore"
                       :myScore="myScore"
                       :identity="identity"
                       @optClick="optClick" 
                       @questionOk="questionOk"
                       @startTimer="startTimer"
                        >
      </answer-question>
      <!-- 结果展示 -->
      <div class="result-box">
        <ques-result v-if="showResult" 
                    :myScore="myScore" 
                    :otherScore="otherScore" 
                    :startAnimate="showResultAnimate" 
                    :identity="identity"
                    @btnClickOne="startAgain"
                    @btnClickTwo="startMyGame">
        </ques-result>
      </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import timeCount from "@/pages/game/components/timeCount";
import antTitleItem from "@/components/public/antTitleItem.vue";
import answerQuestion from "@/components/public/answerQuestion.vue";
import userHead from "@/components/public/userHead.vue";
import quesResult from "@/components/public/quesResult.vue";

export default {
  props: ["allData","answerResponse","roomUserId","withUserId","identity"],
  components: {
    "tiem-count":timeCount,
    "ant-title-item":antTitleItem,
    "answer-question":answerQuestion,
    "user-head":userHead,
    "ques-result":quesResult
  },
  data() {
    return {
      dataReady: false,
      initTime:10,
      initTimeCount: false,
      startTimeCount: false,
      stopTimeCount: false,
      showTitle: false, //题目显示
      showTitleType: false, //题目类型显示
      showProcess: false, //分数条
      showDoubleTip: false, //双倍积分
      showHead:false,//答题的头部
      showResult:false,
      showResultAnimate:false,
      headMode:0,
      lhr:0,//left head result
      rhr:0,//right head result
      showTime:true,
      canNext:false,
      // 提示音
      audio: null,
      // props
      quesIndex: 0,
      // 分数条
      otherScore:{},
      myScore:{},
      // 数据相关
      subjectList: [{ title: "测试题目", parentType: 1, modeType: 0 }], //题目数据
      selectList: [{ name: "选项名字" }], //选项列表
      myAnsList:[],
      otherAnsList:[],
      userResult:0,
      withUserResult:0,
    };
  },
  watch:{
    answerResponse(list){
    if (list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].uid == this.withUserId) {
            let obj = JSON.parse(JSON.stringify(this.otherScore));
                obj = Object.assign(obj,list[i])
                this.otherScore = obj;
            if (list[i].timeout) {
              this.otherAnsList[this.quesIndex] = 0; //超时
            } else {
              if (list[i].right) {
                this.otherAnsList[this.quesIndex] = 1; //回答正确
              } else {
                this.otherAnsList[this.quesIndex] = 2; //回答错误
              }
            }
          }

          if (list[i].uid == this.roomUserId) {
              let obj = JSON.parse(JSON.stringify(this.myScore));
                  obj = Object.assign(obj,list[i])
                  this.myScore = obj;
            if (list[i].timeout) {
              this.myAnsList[this.quesIndex] = 0; //超时
            } else {
              if (list[i].right) {
                this.myAnsList[this.quesIndex] = 1; //回答正确
              } else {
                this.myAnsList[this.quesIndex] = 2; //回答错误
              }
            }
          }
        }
      }
      if (list.length == 2) {
        this.canNext = !this.canNext;
        if(this.myScore.score>this.otherScore.score){
          this.userResult=0;
          this.withUserResult=1;
        }else if(this.myScore.score<this.otherScore.score){
          this.userResult=1;
          this.withUserResult=0;
        }else{
          this.userResult=2;
          this.withUserResult=2;
        }
        console.log("canNext");
      }
    },
  },
  computed: {
    ...mapState(["appInfo", "IMGHEAD"]),
    questionType() {
      if (this.subjectList[this.quesIndex].parentType) {
        let type = this.subjectList[this.quesIndex].parentType;
        let obj = {
          1: "德",
          2: "商",
          3: "文",
          4: "理",
          5: "艺",
          6: "体"
        };
        return obj[type];
      }
    }
  },
  methods: {
    initAllData() {
      this.subjectList = JSON.parse(
        JSON.stringify(this.allData.Result.game.subjectList)
      ); //深拷贝数据对象
      this.otherScore = Object.assign(this.otherScore,{name:this.allData.Result.withUser.basicInfo.nickName,headImg:this.allData.Result.withUser.basicInfo.avatarUrl})
      this.myScore = Object.assign(this.myScore,{name:this.allData.Result.user.basicInfo.nickName,headImg:this.allData.Result.user.basicInfo.avatarUrl})
      this.dataReady = true;
    },
    initAudio() {
      this.audio = wx.createInnerAudioContext();
    },
    timeoutHandle() {},
    // 动画管理
    showTitleTag() {
      setTimeout(() => {
        this.showHead=true;
      }, 0);
      this.showTime=true;
      this.showTitleType = !this.showTitleType;
      setTimeout(() => {
        //显示题目
        this.showTitle = !this.showTitle;
        setTimeout(() => {
          this.animationStep1(false);
        }, 1000);
      }, 1600);
    },
    antTitleHandle(){ //题目类型展示结束 -- 显示题目 和选项
      if(this.quesIndex>0){
        setTimeout(() => {
          this.$emit("nextQues");
        }, 1300);
      }
    },
    questionOk(res) {
      //当前题目答完  清空计时器，暂停进度条
      // this.otherScore = null;//清空上一条数据
      this.stopTimeCount = !this.stopTimeCount;
      if (this.quesIndex < 4) {
        setTimeout(() => {
          this.initTimeCount = !this.initTimeCount;
          this.quesIndex++; //题目增加
          this.initTime=10;
          // this.showTitleType=!this.showTitleType;
          this.showTitleTag();
        }, 2000);
      } else if (this.quesIndex == 4) {
        this.stopTimeCount = !this.stopTimeCount;
        setTimeout(() => {
          this.$emit("end");
          this.initTimeCount = !this.initTimeCount;
          this.quesIndex = 0;
          this.showHead = false;
          setTimeout(() => {
            this.headMode=1;//结算模式
            this.showTime = false; //隐藏定时器
            this.showHead=true;
            setTimeout(() => {
              this.showResult=true;
              setTimeout(() => {
                this.showResultAnimate=true;
              }, 500);
            }, 500);
          }, 1000);
        }, 1000);
      }

      this.gameResult = res;
    },
    animationStep1() {
      if (this.quesIndex != 4) {
        this.showProcess = true;
      }
    },
    startAgain(){ //再来一局
      this.$emit('startAgain');
    },
    startMyGame(){
      this.$emit('startMyGame');
    },
    // 子组件回调
    optClick(obj){
      this.$emit("answerEvent",obj);
    },
    startTimer(){
      this.startTimeCount=!this.startTimeCount;
    },
    stopTimer(){
      this.stopTimeCount=!this.stopTimeCount;
    },
  },
  mounted() {
    this.initAllData(); //初始化出局
    this.initAudio();
    setTimeout(() => {
      this.showTitleTag(); //开始题目
    }, 100);
  }
};
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ans {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.head {
  width: 100%;
  padding-top: 30rpx;
  @include flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}
.time{
  @include flex;
  flex-grow: 2;
  opacity: 1;
}

.content {
  position: relative;
  @include flex;
  align-items: flex-end;
}
// 通用 可优化样式
.ans-center {
  min-height: 100rpx;
  transition: all 0.4s ease;
  max-width: 630rpx;
}
.imgTitle {
  .title {
    font-size: 34rpx;
  }
}
.img-box {
  width: 500rpx;
  height: 278rpx;
  margin: 0 auto 30rpx auto;
  opacity: 0;
  transition: all 0.8s ease;
  img {
    width: 100%;
    height: 100%;
  }
}
.title {
  height: 206rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 42rpx;
  padding: 30rpx 50rpx;
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.8s ease;
}

.select-list {
  height: 590rpx;
  min-width: 630rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40rpx;
  .select-item {
    width: 542rpx;
    height: 120rpx;
    position: relative;
    font-size: 40rpx;
    border: 3rpx solid #ababab;
    border-radius: 10rpx;
    box-sizing: border-box;
    transition: all 0.4s ease;
    opacity: 0;
    transform: scale(0);
    // filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 20rpx 6rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 536rpx 114rpx;
    background-repeat: repeat-y;
    background-image: url("");
    img {
      position: absolute;
      width: 28rpx;
      height: 28rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .left-img {
      left: 14rpx;
    }
    .right-img {
      right: 14rpx;
    }
  }

  .success,
  .fail {
    border: 6rpx solid #fff;
    color: #fff;
    animation: btnScale 0.4s ease;
  }
  .success {
    background: #67c29f;
  }
  .fail {
    background: #fd5c5c;
  }
  .noSelect {
    transform: scale(0) !important;
    opacity: 0 !important;
  }
}
.imgTitle {
  .select-list {
    height: 448rpx;
    .select-item {
      width: 433rpx;
      height: 96rpx;
      font-size: 32rpx;
      box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.25);
      img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
.listIn {
  .select-item {
    transform: scale(1);
    opacity: 1;
  }
}
.imgIn {
  opacity: 1;
}
@keyframes btnScale {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}


// 进度条
.processIn {
  transform: translateX(0) !important;
}
.score-process {
  box-sizing: border-box;
  width: 30rpx;
  height: 564rpx;
  border: 3rpx solid #858585;
  padding: 4rpx;
  border-radius: 1000rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 20rpx;
  transition: all 0.4s ease;
  transform: translateX(-120rpx);
  &:last-child {
    transform: translateX(120rpx);
  }
  .score {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40rpx;
    color: #676565;
    line-height: 1;
    top: -40rpx;
  }
  .process {
    width: 100%;
    background: #67c29f;
    border-radius: 1000rpx;
    height: 0;
    transition: all 0.3s linear;
  }
}
.otherAnsFail {
  background: #fd5c5c !important;
}
.result-box{
  position: absolute;
  top: 400rpx;
  left: 50%;
  transform: translateX(-50%);
}
.head-tag{
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
// 通用 可优化样式-----------end
</style>
